<template>
  <div class="play-all" />
</template>

<script>
export default {
  name: 'PlayAllScene',
  components: {},
  props: {
    loadingVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dataModel: new ht.DataModel(),
      interval: null,
      duration: 300
    }
  },
  computed: {},
  watch: {
    loadingVisible: {
      deep: true,
      immediate: true,
      handler(loadingVisible) {
        if (!loadingVisible) {
          this.$nextTick(() => {
            this.initModel()
          })
        }
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initModel() {
      const { dataModel } = this
      const g3d = new ht.graph3d.Graph3dView(dataModel)
      // const link = {
      //   "al-more": "http://www.hightopo.com/demos/cn-index.html",
      //   "al-dianLi": "http://www.hightopo.com/demo/intelligent-town/",
      //   "al-gongKong": "http://www.hightopo.com/demo/transfer-station/index.html",
      //   "al-dianXin": "http://www.hightopo.com/demo/substation-city/",
      //   "al-nengYuan": "http://www.hightopo.com/demo/fan3d-magic/",
      //   "al-jiaoTong": "http://www.hightopo.com/demo/crossroads/",
      //   "sc-vector": "http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html",
      //   "sc-data": "http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html",
      //   "sc-3d": "http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html"
      // }

      g3d.setEye(-2e3, 2e3, 4e3)
      g3d.moveCamera([-56, 580, 2600], [-24, -199, -98], { duration: 1500 })
      g3d.setFar(1e5)
      // 反序列化数据到数据容器
      g3d.deserialize('/scenes/htdesign/组态/HT产品构成.json', (json, dm, gv, datas) => {
        // json, dm, gv, datas77
        // t,e,a,o
        const scene = json.scene
        gv.setCenter(scene.center)
        dm.each((t) => {
          const name = t.getDisplayName()
          if (name !== '文字' && name !== 'ht-icon') return
          dataModel.a('y', t.p3()[1])
          dataModel.a('direction', 'up')
          if (name === 'blink') {
            dataModel.a('direction', 'down')
          }
        })
      })

      // 添加线任务
      const o = {
        interval: 100,
        action: function(t) {
          t.getTag() === 'line' ? t.setRotation(t.getRotation() + Math.PI / 10) : t.getTag() === 'serverPanel1' ? t.setRotation(t.getRotation() + Math.PI / 20) : t.getTag() === 'serverPanel2' && t.setRotation(t.getRotation() + Math.PI / 50)
        }
      }
      dataModel.addScheduleTask(o)

      // 文字动画效果
      dataModel.addScheduleTask({
        interval: 50,
        action: function(t) {
          // console.log('t:', t);
          const name = t.getDisplayName()
          if (name === '文字' || name === 'ht-icon') {
            const e = t.p3()[0]
            const a = t.p3()[1]
            const o = t.p3()[2]
            const i = dataModel.a('y') + 20
            const n = dataModel.a('direction')
            if (n === 'up') {
              t.p3([e, a + 1, o])
              if (a + 1 === i) {
                dataModel.a('direction', 'down')
              }
            }
            if (n === 'down') {
              t.p3([e, a - 1, o])

              if (a - 1 === t.a('y')) {
                dataModel.a('direction', 'up')
              }
            }
          }
        }
      })

      // 线条上的动画
      dataModel.addScheduleTask({
        interval: 150,
        action: function(t) {
          if (t.getDisplayName() === '管道') {
            const e = t.s('shape3d.uv.offset')
            e ? t.s('shape3d.uv.offset', [e[0] + 0.1, e[1]]) : t.s('shape3d.uv.offset', [0, 0])
          }
        }
      })

      // 上下动画
      dataModel.addScheduleTask({
        interval: 150,
        action: function(t) {
          if (t.getDisplayName() === 'blink') {
            const e = 10 * t.s('shape3d.opacity')
            const a = dataModel.a('direction')
            if (a === 'down') {
              t.s('shape3d.opacity', (e - 1) / 10)
              if ((e - 1) / 10 == 0) {
                dataModel.a('direction', 'up')
              }
            }
            if (a === 'up') {
              t.s('shape3d.opacity', (1 + e) / 10)
              if ((1 + e) / 10 == 0.7) {
                dataModel.a('direction', 'down')
              }
            }
          }
        }
      })

      // 画线条和链接
      // this.setIntervalAndLink(link)

      let i; let n; let d; const c = (i = function(t) {
        window.open(t, '_blank')
      }, n = 300, d = null, function(t) {
        d !== null && clearTimeout(d), d = setTimeout(function() {
          i(t)
        }, n)
      })

      g3d.mi(function(t) {
        console.log(t)

        // 点击跳转链接
        if (t.kind === 'clickData') {
          // for (const e in link) t.data.getTag() === e && c(link[e])
        }
      })
      g3d.addToDOM()
    },

    // 设置定时器和链接
    setIntervalAndLink() {
      const { duration } = this
      clearTimeout(this.interval)
      this.interval = null
      if (!this.interval) {
        this.interval = setTimeout(() => {
          // this.setLink(link)
        }, duration)
      }
    },
    setLink(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
